<template>
  <b-layout class="contrast-of-compliance" placement="top" space="30px" mode="vertical"
    v-loading="loading"
    element-loading-text="对比中，请等待..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.7)"
  >
    <div slot="first" class="sedondary-text-color">合规性对比</div>
    <b-layout slot="last" space="50px">
      <div slot="first" class="contrast-of-compliance-title">
        <span class="title">选择对比的法规如下:</span>
        <span class="history" @click="historyClick">
          历史对比结果
          <i class="el-icon-arrow-right"></i>
        </span>
      </div>
      <b-layout slot="last" mode="vertical" placement="bottom" space="200px" class="contrast-of-compliance-content">
        <el-row slot="first" class="compare-row">
          <el-col :span="11">
            <select-regulations :currentNodes="currentNodes" @delRegulation="delRegulation"></select-regulations>
          </el-col>
          <el-col :span="2">
            <div class="link-div">
              <svg class="iconfont-symbol" aria-hidden="true">
                <use xlink:href="#law-iconguanlian"></use>
              </svg>
            </div>
          </el-col>
          <el-col :span="11">
            <checkbox-com ref="tree-com" @changeCurrentNodes="changeCurrentNodes"></checkbox-com>
          </el-col>
        </el-row>
        <upload-com slot="last" :currentNodes="currentNodes" @changeLoading="changeLoading"></upload-com>
      </b-layout>
    </b-layout>
  </b-layout>
</template>

<script>
import BLayout from '@/layouts/BinaryLayout'
import uploadCom from '../components/upload-com'
import checkboxCom from '../components/checkbox-com'
import selectRegulations from '../components/select-regulations'
export default {
  components: {
    BLayout,
    uploadCom,
    checkboxCom,
    selectRegulations
  },
  data () {
    return {
      currentNodes: [],
      loading: false
    }
  },
  watch: {
  },
  computed: {
  },
  mounted () {

  },
  methods: {
    changeCurrentNodes (currentNodes) {
      this.currentNodes = currentNodes
    },
    delRegulation ({ item, index }) {
      this.currentNodes.splice(index, 1)
      this.$nextTick(() => {
        this.$refs['tree-com'].setCheckedNodes(this.currentNodes)
      })
    },
    historyClick () {
      this.$router.push('history')
    },
    changeLoading (loading) {
      this.loading = loading || false
    }
  }
}
</script>

<style lang="scss" scoped>

.contrast-of-compliance{
  .sedondary-text-color{
    color: $sedondary-text-color;
    font-size: $fs-m;
  }
  .contrast-of-compliance-title{
    background: $box-title-bg-color;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    line-height: 50px;
    border-bottom: 1px solid $box-border-color-light;
    .title{
      font-weight: bold;
    }
    .history{
      float: right;
      color: $primary-color;
      cursor: pointer;
    }
  }
  .contrast-of-compliance-content{
    background: $box-bg-color;
    padding: 30px 50px;
    .compare-row{
      height: 100%;
      border: 1px solid $box-border-color;
      border-radius: 4px;
      >.el-col{
        height: 100%;
      }
      .link-div{
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        border-left: 1px solid $box-border-color;
        border-right: 1px solid $box-border-color;
        position: relative;
        .iconfont-symbol{
          width: 40px;
          height: 40px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}
</style>
